<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表单验证</title>
	<style type="text/css">
	*{padding:0px;margin:0px;font-size:17px;font-family:Microsoft Yahei;}
	#all{width:560px;height:400px;margin:100px auto;border:solid 2px blue;}
	table{width:560px;height:400px;border:solid 1px #333;}
	input{width:150px;height:30px;border:solid 1px #333;margin-left:10px;}
	.item{text-align:center;width:150px;}

	.cur{border:solid 2px purple;}

	</style>
</head>
<body>
	<div id='all'>
		<form action="1.php" method='post' id='doForm'>
			<table border='1'>
				<tr>
					<td class='item'>用户名:</td>
					<td><input type="text" name='username'><span id='text'>请输入8~16位用户名</span></td>
				</tr>
				<tr>
					<td class='item'>密码:</td>
					<td><input type="password" name='password'><span>请输入6~12密码</span></td>
				</tr>
				<tr>
					<td class='item'>确认密码:</td>
					<td><input type="password" name='repassword'><span>再次输入密码</span></td>
				</tr>
				<tr>
					<td class='item'>手机号:</td>
					<td><input type="text" name='phone'><span>请输入手机号码</span><button id='but'>获取验证码</button></td>
				</tr>
				<tr>
					<td class='item'>验证码:</td>
					<td><input type="text" name='code'><span>请输入验证码</span></td>
				</tr>
				<tr>				
					<td colspan='2' style='text-align:center'><input type="submit" value='注册'></td>
				</tr>
			</table>
		</form>
	</div>

	<script type="text/javascript" src='jquery-1.8.3.min.js'></script>
	<script type="text/javascript">

	var CU = false;
	var PU = false;
	var HU = false;
	var DU = false;

	//用户名
	//获取焦点
	$('input').focus(function(){
		//设置边框颜色
		// $(this).css('border','solid 2px purple');
		$(this).addClass('cur');
	})

	//失去焦点
	$('input[name=username]').blur(function(){
		//获取值
		var uv = $(this).val();
		//正则
		var reg = /^\w{8,16}$/;
		//检测
		var res = reg.test(uv);
		//判断
		if(!res) {
			$(this).css('border','solid 2px red');
			$('#text').text(' 输入的格式不正确');
			$('#text').css('color','red');

			CU = false;
		} else {

			 var u = $(this);
			//发送ajax
			$.post('checkUser.php',{userValue:uv},function(data){

				if(data == 1) {

					u.css('border','solid 2px red');
					$('#text').text('用户名已经存在');
					$('#text').css('color','red');
					CU = false;
				} else {

					u.css('border','solid 2px green');
					$('#text').text('√');
					$('#text').css('color','green');

					CU = true;
				}

			})
		}

	})

	//密码
	//获取焦点
	//失去焦点
	$('input[name=password]').blur(function(){
		//获取值
		var pv = $(this).val();
		//正则
		var reg = /^\w{6,12}$/;
		//检测
		var res = reg.test(pv);
		if(!res) {

			$(this).css('border','solid 2px red');
			$(this).next().text(' 密码格式不正确').css('color','red');

			PU = false;
			
		} else {
			$(this).css('border','solid 2px green');
			$(this).next().text('√').css('color','green');

			PU = true;
		}

	})

	//确认密码
	//失去焦点
	$('input[name=repassword]').blur(function(){
		//获取输入的密码
		var pv = $('input[name=password]').val();
		//获取确认密码
		var rpv = $(this).val();

		if(pv != rpv) {
			$(this).css('border','solid 2px red');
			$(this).next().text('两次密码不一致').css('color','red');

		} else {

			$(this).css('border','solid 2px green');
			$(this).next().text('√').css('color','green');
		}
	})

	//手机号码
	//获取焦点
	//失去焦点
	$('input[name=phone]').blur(function(){
		//获取值
		var hv = $(this).val();
		//正则
		var reg = /^1[3|5|4|7|8]\d{9}$/;
		//检测
		var res = reg.test(hv);
		if(!res) {
			$(this).css('border','solid 2px red');
			$(this).next().text(' 手机号格式不正确').css('color','red');

			HU = false;
		} else{
			$(this).css('border','solid 2px green');
			$(this).next().text('√').css('color','green');
			HU = true;
		}
	})

	//获取验证码
	$('#but').click(function(){

		//发送ajax
		$.post('checkCode.php',{},function(data){


			console.log(data);
		})

		//阻止默认行为
		return false;
	})


	//设置验证码
	//失去焦点
	$('input[name=code]').blur(function(){
		//获取值
		var cv = $(this).val();

		var nv = $(this);

		$.get('checkNum.php',{code:cv},function(data){

			if(data != 1) {

				nv.css('border','solid 2px red');
				nv.next().text(' 验证码有误').css('color','red');
				DU = false;
			} else {

				nv.css('border','solid 2px green');
				nv.next().text('√').css('color','green');
				DU = true;
			}
		})
	})

	//获取submit
	$('#doForm').submit(function(){
		//判断结果
		if(CU && PU && DU && HU) {

			return true;
		} else {

			return false;
		}

		//阻止默认行为
		return false;
	})



	</script>
</body>
</html>